<template>
  <div>
    <Row :gutter="16">
      <Col span="26">
        <Card title="内存">
          <Row>
            <Col span="8">
              <i-circle
                :size="250"
                :trail-width="4"
                :stroke-width="5"
                :percent="75"
                stroke-linecap="square"
                stroke-color="#44a4fb">
                <div class="demo-Circle-custom">
                  <h1>{{change(this.data.mem['memTotal'])}} G</h1>
                  <p>操作系统内存总量</p>
                  <span>
                    已使用内存
                    <i>{{memPercent}}%</i>
                    </span>
                </div>
              </i-circle>
            </Col>
            <Col span="8">
              <i-circle
                :size="250"
                :trail-width="4"
                :stroke-width="5"
                :percent="swapPercent"
                stroke-linecap="square"
                stroke-color="#44a4fb">
                <div class="demo-Circle-custom">
                  <h1>{{change(this.data.mem['swapTotal'])}} G</h1>
                  <p>交换区内存总量</p>
                  <span>
                已使用交换区内存
                <i>{{swapPercent}}%</i>
            </span>
                </div>
              </i-circle>
            </Col>
            <Col span="8">
              <i-circle
                :size="250"
                :trail-width="4"
                :stroke-width="5"
                :percent="jvmPercent"
                stroke-linecap="square"
                stroke-color="#44a4fb">
                <div class="demo-Circle-custom">
                  <h1>{{jvmChange(this.data.mem['jvmTotal'])}} G</h1>
                  <p>JVM内存总量</p>
                  <span>
                已使用JVM内存
                <i>{{jvmPercent}}%</i>
            </span>
                </div>
              </i-circle>
            </Col>
          </Row>
        </Card>
      </Col>
    </Row>
    <Row :gutter="16" style="margin-top: 15px">
      <Col span="24">
        <Card title="服务器信息">
          <List>
            <ListItem v-for="(item,key) in data.computer" :key="key">

              <Row style="width: 100%">
                <Col span="12" v-for="(i,k) in item" :key="k">
                  {{k}}{{i}}
                </Col>
              </Row>
            </ListItem>
          </List>
        </Card>
      </Col>
    </Row>
    <Row :gutter="16" style="margin-top: 15px">
      <Col span="24">
        <Card title="cpu">
          <List>
            <ListItem>
              <Row style="width: 100%">
                <Col span="4">
                  CPU生产商
                </Col>
                <Col span="4">
                  CPU类别
                </Col>
                <Col span="4">
                  CPU的总量MHz
                </Col>
                <Col span="4">
                  CPU当前空闲率
                </Col>
                <Col span="4">
                  CPU总的使用率
                </Col>
              </Row>
            </ListItem>
            <ListItem v-for="(item,key) in data.cpuList" :key="key">
              <Row style="width: 100%">
                <Col span="4" v-for="(i,k) in item" :key="k">
                  {{i}}
                </Col>
              </Row>
            </ListItem>
          </List>
        </Card>
      </Col>
    </Row>
    <Row :gutter="16" style="margin-top: 15px">
      <Col span="24">
        <Card title="磁盘状态">
          <List>
            <ListItem>
              <Row style="width: 100%">
                <Col span="4">
                  分区的盘符
                </Col>
                <Col span="4">
                  文件系统类型
                </Col>
                <Col span="4">
                  已使用大小
                </Col>
                <Col span="4">
                  剩余大小
                </Col>
                <Col span="4">
                  总大小
                </Col>
                <Col span="4">
                  资源的利用率
                </Col>
              </Row>
            </ListItem>
            <ListItem v-for="(item,key) in data.file" :key="key">
              <Row style="width: 100%">
                <Col span="4" v-for="(i,k) in item" :key="k">
                  {{i}}
                </Col>
              </Row>
            </ListItem>
          </List>
        </Card>
      </Col>
    </Row>
  </div>
</template>

<script>
import { infoServer } from '../../../../api/sys/monitor/server'

export default {
  name: 'server',
  data () {
    return {
      data: {},
      computer: [],
      timer: null
    }
  },
  computed: {
    memPercent () {
      return parseInt((this.data.mem['memUsed'] / this.data.mem['memTotal']) * 100)
    },
    swapPercent () {
      return parseInt((this.data.mem['swapUsed'] / this.data.mem['swapTotal']) * 100)
    },
    jvmPercent () {
      return parseInt((this.data.mem['jvmUsed'] / this.data.mem['jvmTotal']) * 100)
    }
  },
  methods: {
    change (val) {
      return (val / 1024 / 1024).toFixed(2)
    },
    jvmChange (val) {
      return (val / 1024 / 1024 / 1024).toFixed(2)
    },
    refresh () {
      this.timer = setInterval(this.init, 5000)
    },
    init () {
      infoServer().then(res => {
        this.data = res
      })
    }
  },
  mounted () {
    this.init()
    this.refresh()
  },
  beforeDestroy () {
    clearInterval(this.timer)
    this.timer = null
  }
}
</script>

<style lang="less" scoped>
  .demo-Circle-custom {
    & h1 {
      color: #4f414d;
      font-size: 28px;
      font-weight: normal;
    }

    & p {
      color: #657180;
      font-size: 14px;
      margin: 10px 0 15px;
    }

    & span {
      display: block;
      padding-top: 15px;
      color: #657180;
      font-size: 14px;

      &:before {
        content: '';
        display: block;
        width: 50px;
        height: 1px;
        margin: 0 auto;
        background: #e0e4e6;
        position: relative;
        top: -15px;
      }
    ;
    }

    & span i {
      font-style: normal;
      color: #4f414d;
    }
  }
</style>
